<template>
	<view class="j-shop-info" v-if="shopName">
		<text class="iconfont icon-dianpu"></text>
		<text class="shop-name" data-clickable @click.stop="handleShopClick" v-if="shopLink">{{ shopName }}</text>
		<text class="shop-name" v-else>{{ shopName }}</text>
		<uv-icon size="24rpx" color="#666" v-if="shopLink" name="arrow-right"></uv-icon>
	</view>
</template>

<script>
export default {
	name: 'JShopInfo',
	props: {
		// 店铺名称
		shopName: {
			type: String,
			required: true
		},
		// 店铺链接
		shopLink: {
			type: String,
			default: null
		},
		// 背景颜色
		backgroundColor: {
			type: String,
			default: 'transparent'
		},
		// 内边距
		padding: {
			type: String,
			default: ''
		},
		// 外边距
		margin: {
			type: String,
			default: '0'
		},
		// 圆角
		borderRadius: {
			type: String,
			default: '6rpx'
		},
		// 图标颜色
		iconColor: {
			type: String,
			default: '#333'
		},
		// 图标大小
		iconSize: {
			type: String,
			default: '24rpx'
		},
		// 店铺名称颜色
		shopNameColor: {
			type: String,
			default: '#333'
		},
		// 店铺名称字体大小
		shopNameSize: {
			type: String,
			default: '24rpx'
		},
		// 店铺名称字重
		shopNameWeight: {
			type: String,
			default: '400'
		},
		// 可点击时的颜色
		clickableColor: {
			type: String,
			default: '#333'
		}
	},
	methods: {
		handleShopClick() {
			if (this.shopLink) {
				this.$emit('shopClick', {
					shopName: this.shopName,
					shopLink: this.shopLink
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.j-shop-info {
	margin: v-bind(margin);
	padding: v-bind(padding);
	background: v-bind(backgroundColor);
	border-radius: v-bind(borderRadius);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	transition: all 0.2s ease;
	line-height: 1;
	.iconfont {
		font-size: v-bind(iconSize);
		color: v-bind(iconColor);
		margin-right: 6rpx;
	}

	.shop-name {
		// flex: 1;
		font-size: v-bind(shopNameSize);
		color: v-bind(shopNameColor);
		font-weight: v-bind(shopNameWeight);
		&[data-clickable] {
			color: v-bind(clickableColor);
			&:active {
				opacity: 0.7;
			}
		}
	}
}
</style>














